<!-- 城市交通 -->
<template>
  <div class="intelligent-security">
    <LeftBox><Left /></LeftBox>
    <RightBox><Right /></RightBox>
  </div>
  <FloatButton :btn_data="btn_data"></FloatButton>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'

import LeftBox from '@/components/left_box.vue'
import RightBox from '@/components/right_box.vue'
import Left from './Panel/left/index.vue'
import Right from './Panel/right/index.vue'
import FloatButton from '@/components/FloatButton/index.vue'
import { initMetro, exitMetro } from './funs/metro'
import { initTrafficJam, exitTrafficJam } from './funs/trafficJam'
const btn_data = reactive([
  {
    id: 0,
    name: '地铁分布',
    init: initMetro,
    exit: exitMetro
  },
  {
    id: 1,
    name: '道路拥堵',
    init: initTrafficJam,
    exit: exitTrafficJam
  }
])

const clear = () => {
  // 离开页面时，清除所有的分析内容
  btn_data.forEach(item => item.exit())
}

onMounted(() => {
  // playInitAnimation(AnimationType.Initialization)
})

onBeforeUnmount(() => {
  clear()
})
</script>
<style lang="scss" scoped>
.contentWrap {
  @include hHeight(30);
  @include FontSize(14);
  display: flex;
  justify-content: flex-start;
  @include LineHeight(30);
  .left {
    @include Padding(0, 5, 0, 5);
  }
  .right {
    flex: 1;
    @include Padding(0, 5, 0, 10);
  }
}

.btn2 {
  @include MarginTop(50);
  @include MarginLeft(160);
}
</style>
